<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin: 0;padding: 0}
		ul{list-style: none;}
		li{
			line-height: 46px;
		}
		li:nth-of-type(2n){
			background-color: #dc2932;
		}
		li:nth-of-type(2n+1){
			background-color: #396;
		}
	</style>
</head>
<body>
	<div id="app">
		<ul>
			<li>a</li>
			<li>a</li>
			<li>a</li>
			<li>a</li>
		</ul>
	</div>


	<script type="text/javascript">

		function test(){
			var li = document.getElementsByTagName("li");

			for(var i = 0; i < li.length; i++){
				(function(j){
					li[j].onclick = function(){
						console.log(j+1)
					}
				}(i));
			}
		}
		test();

	</script>

</body>
</html>